<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>

    <title>BCM</title>

    <style>
        .tit {
            text-align: center;
        }
    </style>


    <script>
        $(function () {
            // 弹出模态框
            $('.add-btn').click(function () {
                $('#addModal').modal({
                        backdrop: 'static'
                })
            });
            //添加
            $(".add-modal-save").click(function () {
                var id = parseInt(Math.random()*8999) + 1000;
                // 获取模态框内的值
                var username = $("#addModal form input[name=addUserName]").val();
                            // :checked获取选中的值（单选框）
                var gender = $("#addModal form input[name=gender]:checked").val() == 'M' ? '男' : '女';

                var email = $("#addModal form input[name=addEmail]").val();

                var dept = $("#addModal form select option:selected").val();
                        // option:selected 获得下拉菜单列表的选定值（下拉框）
                switch (dept) {
                    case 'yf':
                        dept = "研发部";
                        break;

                    case 'cw':
                        dept = "财务部";
                        break;


                    case 'hq':
                        dept = "后勤部";
                        break;


                    case 'rs':
                        dept = "人事部";
                        break;


                    case 'cs':
                        dept = "测试部";
                        break;
                }


                // 把数据放在td（格）中
                var ckTd = $("<td><input type='checkbox' class='checkitem'> </td>");

                var idTd = $(" <td></td>").append(id);

                var usernameTd = $(" <td></td>").append(username);

                var genderTd = $(" <td></td>").append(gender);

                var emailTd = $(" <td></td>").append(email);

                var deptTd = $(" <td></td>").append(dept);

                        var editBtn = $('<button type="button" class="btn btn-primary btn-sm"> <span class="glyphicon glyphicon-pencil"></span> 修改</button>');
                        var delBtn = $('<button type="button" class="btn btn-danger btn-sm del-btn"> <span class="glyphicon glyphicon-trash"></span> 删除</button>');
                    //将两个按钮组放在一个td（格）中
                var btnTd = $('<td></td>').append(editBtn).append(" ").append(delBtn);


                // 将td（格）排列组成一行（tr）放在tbody里
                var tr = $("<tr></tr>")
                    .append(ckTd)
                    .append(idTd)
                    .append(usernameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptTd)
                    .append(btnTd)
                    .appendTo("tbody");


                // 隐藏模态框
                $("#addModal").modal('hide');
                
            
            });
            //删除所有
            $('.checkall').click(function(){
                $('.checkitem').prop('checked',$(this).prop('checked'))
            })
            $(document).on('click','.checkitem',function(){
                let flag = $('.checkitem').length==$('.checkitem:checked').length
                $('.checkall').prop('checked',flag)
            })
            $('.del-all').click(function(){
                $('.checkitem:checked').parent().parent().remove()
            })
            //单行删除
            $(document).on('click','.del-btn',function(){
                $(this).parent().parent().remove();
            })
            //修改
            var tt
            $(document).on('click','.xg-btn',function(){
                tt=$(this).parent().parent()
                var edl=tt.children();
                var ymid=edl.eq(1).html();
                var ymname=edl.eq(2).html();
                var ymgender=[edl.eq(3).html()=='男'? "M":"F"];
                var ymemail=edl.eq(4).html();
                var ymdept=edl.eq(5).html();
                switch (ymdept) {
                    case '研发部':
                    ymdept = "yf";
                        break;

                    case '财务部':
                    ymdept = "cw";
                        break;


                    case '后勤部':
                    ymdept = "hq";
                        break;


                    case '人事部':
                    ymdept = "rs";
                        break;


                    case '测试部':
                    ymdept = "cs";
                        break;
                }
                $("#editModal form input[name=editUserName]").val(ymname)
                $("#editModal form input[name=gender]").val(ymgender)
                $("#editModal form input[name=editEmail]").val(ymemail)
                $("#editModal form select").val([ymdept])
                $('#editModal').modal({
                        backdrop: 'static'
                })

                $('.edit-modal-save') .click( function(){
                var username = $("#editModal form input[name=editUserName]").val();
                        
                var gender = $("#editModal form input[name=gender]:checked").val() == 'M' ? '男' : '女';

                var email = $("#editModal form input[name=editEmail]").val();

                var dept = $("#editModal form select option:selected").val();
                switch (dept) {
                    case 'yf':
                        dept = "研发部";
                        break;

                    case 'cw':
                        dept = "财务部";
                        break;


                    case 'hq':
                        dept = "后勤部";
                        break;


                    case 'rs':
                        dept = "人事部";
                        break;


                    case 'cs':
                        dept = "测试部";
                        break;
                }
                var se=tt.children()
               se.eq(2).html(username)
               se.eq(3).html(gender)
               se.eq(4).html(email)
               se.eq(5).html(dept)
               $("#editModal").modal('hide');

            })

            })
            
        })







    </script>
</head>



<body>

    <!-- add-Modal -->
    <div class="add-modal modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">员工新增</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">

                        <!-- 姓名 -->
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">姓名:</label>
                            <div class="col-sm-10">
                                <input type="email" name='addUserName' class="form-control" id="addinputusername"
                                    placeholder="请输入姓名">
                            </div>
                        </div>


                        <!-- 性别 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别:</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="M"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="F"> 女
                                </label>
                            </div>
                        </div>


                        <!-- 邮箱 -->
                        <div class="form-group">
                            <label for="uesremail" class="col-sm-2 control-label">邮箱:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name='addEmail' id="addinputemail"
                                    placeholder="请输入邮箱">
                            </div>
                        </div>

                        <!-- 部门 -->
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label" name='dept'>部门:</label>
                            <div class="col-sm-10">
                                <select class="form-control">
                                    <option value="yf">研发部</option>
                                    <option value="cw">财务部</option>
                                    <option value="hq">后勤部</option>
                                    <option value="rs">人事部</option>
                                    <option value="cs">测试部</option>
                                </select>

                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary add-modal-save">保存</button>
                </div>
            </div>
        </div>
    </div>

     <!-- xgModal -->
     <div class="edit-modal modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">员工修改</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">

                        <!-- 姓名 -->
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">姓名:</label>
                            <div class="col-sm-10">
                                <input type="email" name='editUserName' class="form-control" id="addinputusername"
                                    placeholder="请输入姓名">
                            </div>
                        </div>


                        <!-- 性别 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别:</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="M"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" value="F"> 女
                                </label>
                            </div>
                        </div>


                        <!-- 邮箱 -->
                        <div class="form-group">
                            <label for="uesremail" class="col-sm-2 control-label">邮箱:</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" name='editEmail' id="addinputemail"
                                    placeholder="请输入邮箱">
                            </div>
                        </div>

                        <!-- 部门 -->
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label" name='dept'>部门:</label>
                            <div class="col-sm-10">
                                <select class="form-control">
                                    <option value="yf">研发部</option>
                                    <option value="cw">财务部</option>
                                    <option value="hq">后勤部</option>
                                    <option value="rs">人事部</option>
                                    <option value="cs">测试部</option>
                                </select>

                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary edit-modal-save">修改</button>
                </div>
            </div>
        </div>
    </div>









    <div class="container">
        <!-- 1 -->
        <div class="row">
            <div class="col-md-12 col-lg-12">
                <h1 class="tit">软工三班CRM系统</h1>
            </div>
        </div>
        <!-- 2 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary add-btn ">新增</button>
                <button type="button" class="btn btn-danger del-all">删除</button>
            </div>
        </div>
        <!-- 3 -->

        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <thead>
                        <tr>
                            <th> <input type="checkbox" class="checkall"> </th>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>邮箱</th>
                            <th>部门</th>
                        </tr>

                    </thead>

                    <tbody>
                        <tr>
                            <td> <input type="checkbox" class="checkitem"> </td>

                            <td>1001</td>
                            <td>小明</td>
                            <td>男</td>
                            <td>@xiaoming</td>
                            <td>研发部</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm xg-btn"> <span
                                        class="glyphicon glyphicon-pencil"></span> 修改</button>
                                <button type="button" class="btn btn-danger btn-sm del-btn"> <span
                                        class="glyphicon glyphicon-trash"></span> 删除</button>
                            </td>
                        </tr>

                        <tr>

                            <td> <input type="checkbox" class="checkitem"> </td>
                            <td>1002</td>
                            <td>小红</td>
                            <td>女</td>
                            <td>@xiaohong</td>
                            <td>人事部</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm xg-btn"> <span
                                        class="glyphicon glyphicon-pencil"></span> 修改</button>
                                <button type="button" class="btn btn-danger btn-sm del-btn"> <span
                                        class="glyphicon glyphicon-trash"></span> 删除</button>
                            </td>
                        </tr>

                        <tr>

                            <td> <input type="checkbox" class="checkitem"> </td>
                            <td>1003</td>
                            <td>小刚</td>
                            <td>男</td>
                            <td>@xiaogang</td>
                            <td>研发部</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm xg-btn"> <span
                                        class="glyphicon glyphicon-pencil"></span> 修改</button>
                                <button type="button" class="btn btn-danger btn-sm del-btn"> <span
                                        class="glyphicon glyphicon-trash"></span> 删除</button>
                            </td>
                        </tr>

                        <tr>

                            <td> <input type="checkbox" class="checkitem"> </td>
                            <td>1004</td>
                            <td>小李</td>
                            <td>男</td>
                            <td>@xiaoming</td>
                            <td>财务部</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm xg-btn"> <span
                                        class="glyphicon glyphicon-pencil"></span> 修改</button>
                                <button type="button" class="btn btn-danger btn-sm del-btn"> <span
                                        class="glyphicon glyphicon-trash"></span> 删除</button>
                            </td>
                        </tr>

                        <tr>

                            <td> <input type="checkbox" class="checkitem"> </td>
                            <td>1005</td>
                            <td>小张</td>
                            <td>男</td>
                            <td>@xiaoming</td>
                            <td>人事部</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm xg-btn"> <span
                                        class="glyphicon glyphicon-pencil"></span> 修改</button>
                                <button type="button" class="btn btn-danger btn-sm del-btn"> <span
                                        class="glyphicon glyphicon-trash"></span> 删除</button>
                            </td>
                        </tr>

                        <tr>

                            <td> <input type="checkbox" class="checkitem"> </td>
                            <td>1006</td>
                            <td>小花</td>
                            <td>女</td>
                            <td>@xiaoming</td>
                            <td>财务部</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm xg-btn"> <span
                                        class="glyphicon glyphicon-pencil"></span> 修改</button>
                                <button type="button" class="btn btn-danger btn-sm del-btn"> <span
                                        class="glyphicon glyphicon-trash"></span> 删除</button>
                            </td>
                        </tr>

                        <tr>

                            <td> <input type="checkbox" class="checkitem"> </td>
                            <td>1007</td>
                            <td>小李</td>
                            <td>男</td>
                            <td>@xiaoming</td>
                            <td>测试部</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm xg-btn"> <span
                                        class="glyphicon glyphicon-pencil"></span> 修改</button>
                                <button type="button" class="btn btn-danger btn-sm del-btn"> <span
                                        class="glyphicon glyphicon-trash"></span> 删除</button>
                            </td>
                        </tr>

                        <tr>

                            <td> <input type="checkbox" class="checkitem"> </td>
                            <td>1008</td>
                            <td>小华</td>
                            <td>男</td>
                            <td>@xiaoming</td>
                            <td>人事部</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm xg-btn"> <span
                                        class="glyphicon glyphicon-pencil"></span> 修改</button>
                                <button type="button" class="btn btn-danger btn-sm del-btn"> <span
                                        class="glyphicon glyphicon-trash"></span> 删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 4 -->

        <div class="row">
            <div class="col-md-6">
                当前第1页，总共1000页，共8000条记录
            </div>
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="active"><a href="#">首页</a></li>
                        <li class="disabled">
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li class="active"><a href="#">尾页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</body>

</html>